<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">按钮类型</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__button-item">
               <uv-button text="默认按钮" size="normal" type="info" @click="click"></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button text="成功按钮" size="normal" type="success"></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button text="危险按钮" size="normal" type="error"></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button text="主要按钮" size="normal" type="primary"></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button text="警告按钮" size="normal" type="warning"></uv-button>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">镂空按钮</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__button-item">
               <uv-button text="镂空按钮" size="normal" type="info" plain></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button text="镂空按钮" size="normal" type="success" plain></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button text="镂空按钮" size="normal" type="error" plain></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button text="镂空按钮" size="normal" type="primary" plain></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button text="镂空按钮" size="normal" type="warning" plain></uv-button>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">细边按钮</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__button-item">
               <uv-button text="细边按钮" size="normal" type="info" plain hairline></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button text="细边按钮" size="normal" type="success" plain hairline></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button text="细边按钮" size="normal" type="error" plain hairline></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button text="细边按钮" size="normal" type="primary" plain hairline></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button text="细边按钮" size="normal" type="warning" plain hairline></uv-button>
            </view>
         </view>
      </view>

      <view class="uv-demo-block">
         <text class="uv-demo-block__title">禁用按钮</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__button-item">
               <uv-button disabled text="禁用按钮" size="normal" type="info"></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button disabled text="禁用按钮" size="normal" type="success"></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button disabled text="禁用按钮" size="normal" type="error"></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button disabled text="禁用按钮" size="normal" type="primary"></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button disabled text="禁用按钮" size="normal" type="warning"></uv-button>
            </view>
         </view>
      </view>

      <view class="uv-demo-block">
         <text class="uv-demo-block__title">加载中</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__button-item">
               <uv-button
                  loadingText="加载中"
                  size="normal"
                  loading
                  loadingMode="circle"
                  type="success"
               ></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button
                  class="button-layout__item"
                  loadingText="加载中"
                  size="normal"
                  loading
                  type="error"
               ></uv-button>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">按钮图标&按钮形状</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__button-item">
               <uv-button text="按钮图标" size="normal" icon="map" plain type="warning"></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button
                  text="按钮图标"
                  size="normal"
                  plain
                  shape="circle"
                  type="success"
               ></uv-button>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义颜色</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__button-item">
               <uv-button
                  text="渐变色按钮"
                  size="normal"
                  color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
               ></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button
                  text="渐变色按钮"
                  size="normal"
                  color="linear-gradient(to right, rgb(220, 194, 11), rgb(4, 151, 99))"
               ></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button text="青绿色按钮" size="normal" color="rgb(10, 185, 156)"></uv-button>
            </view>
         </view>
      </view>

      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义大小</text>
         <view
            class="uv-demo-block__content"
            style="
               padding-bottom: 15px;
               flex-direction: column;
               align-items: stretch;
               flex-wrap: nowrap;
            "
         >
            <uv-button text="超大尺寸" size="large" type="success"></uv-button>
         </view>
         <view class="uv-demo-block__content">
            <view class="uv-page__button-item">
               <uv-button text="普通尺寸" size="normal" type="error"></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button text="小型尺寸" size="small" type="primary"></uv-button>
            </view>
            <view class="uv-page__button-item">
               <uv-button
                  class="button-layout__item"
                  text="超小尺寸"
                  size="mini"
                  type="warning"
               ></uv-button>
            </view>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const click = () => {
   console.log('click');
};
</script>

<style lang="scss" scoped>
.uv-page {
   &__button-item {
      margin: 0 15px 15px 0;
   }
}

.uv-demo-block__content {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
}
</style>
